<style lang="scss" src="./index.scss"></style>
<template>
    <div class="auth-login__tip">
        <transition name="page-transition-slide-in-right">
            <div class="auth-login__tip-box" v-show="curMsg.show">
                <div class="auth-login__tip-icon"><i :class="[curMsg.icon]"></i></div>
                <div class="auth-login__tip-text">{{curMsg.info || ""}}</div>
            </div>
        </transition>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({
    name: "AuthTip"
})
export default class AuthTip extends Vue {
    curMsg: any = {
        icon: "",
        info: "",
        show: false,
        timer: null
    };

    triggerMsg(icon: string, msg: string, callback?: any) {
        this.curMsg.icon = icon;
        this.curMsg.info = msg;
        this.curMsg.show = true;
        this.curMsg.timer && clearTimeout(this.curMsg.timer);
        this.curMsg.timer = setTimeout(() => {
            this.curMsg.show = false;
            callback && callback();
        }, 2000);
    }
}
</script>
